<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>工具模块 util - Layui 文档</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script>;!function(){self!==parent&&(location.href="about:blank")}();</script>
  <link href="/public/layui/v/2.8.6/css/layui.css" rel="stylesheet">
  <link href="/public/static/dist/docs/2.8/css/global.css?v=16" rel="stylesheet">
  <script>
  (function(){if(window.JSON&&window.JSON.parse){var c=document.getElementsByTagName("head"),a=document.createElement("link");try{var b=JSON.parse(localStorage.layui)}catch(d){b={}}"dark"===b.themeMode&&(a.href="//res.sentcss.com/static/dist/docs/2.8/css/layui-theme-dark.css?v=16",a.rel="stylesheet",a.id="layuicss-theme-dark",c[0].appendChild(a))}})();
  </script>
</head>
<body>
<div class="layui-header ws-header ws-bg-light">
  <div class="layui-container">
    <div class="ws-logo">
      <a class="logo" href="../../../index.html">
        <img src="/public/static/images/layui/logo.png" alt="layui">
      </a>
    </div>
    <div class="ws-header-assist">
      <div class="layui-form layui-hide-xs ws-search" lay-filter="LAY-ws-header-component"></div>
      <div class="layui-hide-xs ws-notice"></div>
    </div>
    
    <div class="ws-header-menu">
      <ul class="layui-nav layui-bg-gray ws-bg-light" id="LAY_NAV_TOP">
        <li class="layui-nav-item" data-dir="docs">
          <a href="../index.html">组件</a> 
        </li>
        <li class="layui-nav-item" data-dir="notes">
          <a href="../../../notes/index.html">笔记</a> 
        </li>
        <li class="layui-nav-item layui-hide-xs">
          <a href="https://gitee.com/layui/layui/issues" target="_blank" rel="nofollow">社区</a>
        </li>
        <li class="layui-nav-item">
          <a href="javascript:;">
            <!--<span class="layui-badge-dot" style="left:0; right: auto; margin: -4px 0 0 5px;"></span>--> 
            生态
          </a>
          <dl class="layui-nav-child layui-nav-child-r" style="margin-right: -21px;">  
            <dd class="layui-hide-sm layui-show-xs" lay-unselect>
              <a href="https://gitee.com/layui/layui/issues" target="_blank" rel="nofollow">社区</a>
              <hr>
            </dd>
            <dd lay-unselect>
              <a href="https://dev.layuion.com/extend/" target="_blank">Layui 第三方扩展组件</a>
            </dd>
            <dd lay-unselect>
              <a href="https://github.com/Sight-wcg/layui-theme-dark" target="_blank" lay-unselect>
                Layui 深色主题 <span>(社区贡献)</span>
              </a>
            </dd>
            <dd lay-unselect>
              <a href="https://gitee.com/layui/layui-vue/" target="_blank" lay-unselect>
                Layui of Vue <span>(他人实现)</span>
              </a>
            </dd>
          </dl>
        </li>
        <li class="layui-nav-item">
          <a href="javascript:;">2.8.6</a>
          <dl class="layui-nav-child layui-nav-child-c">  
            <dd lay-unselect class="layui-this"><a href="../../../index.html">2.8.6</a></dd>
            <dd lay-unselect><a href="../../../2.7/index.html">2.7.6</a></dd>
          </dl>
        </li>
      </ul>
      <div class="ws-header-more">
        <i class="layui-icon layui-icon-shrink-right"></i>
      </div>
      <div class="ws-header-tool ws-bg-light">
        <div class="layui-form ws-header-theme" lay-filter="header-theme">
          <input type="checkbox" name="theme-mode" id="ID-header-theme-mode" lay-filter="header-theme-mode" lay-skin="switch">
          <div lay-checkbox>
            <i class="layui-icon layui-icon-moon"></i> | 
            <i class="layui-icon layui-icon-light"></i>
          </div>
        </div>
        <div>
          <a href="https://github.com/layui/layui" target="_blank" title="Github">
            <i class="layui-icon layui-icon-github layui-font-20"></i>
          </a>
        </div>
        <div>
          <a href="https://gitee.com/layui/layui" target="_blank" title="Gitee">
            <i class="layui-icon layui-icon-gitee layui-font-20" style="color: #C71D23;"></i>
            <!--<img src="https://gitee.com/static/images/logo-en.svg" width="21">-->
          </a>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- 让 IE8/9 兼容响应式栅格 -->
<!--[if lt IE 9]>
  <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
  <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
 
<div class="layui-container ws-container">
  
<div class="layui-panel ws-menu">
  <ul class="layui-menu layui-menu-lg ws-docs-menu">
    <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
      <div class="layui-menu-body-title">基础</div>
      <ul>
        <li>
          <div class="layui-menu-body-title">
            <a href="../index.html">
              <span>开始使用</span> 
              <span class="layui-font-12 layui-font-gray">Getting Started</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../base.html">
              <span>底层方法</span>
              <span class="layui-font-12 layui-font-gray">Base Function</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../modules.html">
              <span>模块系统</span>
              <span class="layui-font-12 layui-font-gray">Modules</span>
              <span class="layui-badge-dot layui-bg-green"></span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../versions.html">
              <span>更新日志</span>
              <span class="layui-font-12 layui-font-gray">Versions</span>
              <span class="layui-badge-dot"></span>
            </a>
          </div>
        </li>
      </ul>
    </li>
    <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
      <div class="layui-menu-body-title">布局</div>
      <ul>
        <li>
          <div class="layui-menu-body-title">
            <a href="../layout/index.html">
              <span>框体</span>
              <span class="layui-font-12 layui-font-gray">Layout</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../layout/grid.html">
              <span>栅格</span>
              <span class="layui-font-12 layui-font-gray">Grid</span>
            </a>
          </div>
        </li>
      </ul>
    </li>
    <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
      <div class="layui-menu-body-title">通用</div>
      <ul>
        <li>
          <div class="layui-menu-body-title">
            <a href="../color/index.html">
              <span>颜色</span>
              <span class="layui-font-12 layui-font-gray">Color</span>
              <span class="layui-badge-dot layui-bg-green"></span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../button/index.html">
              <span>按钮</span>
              <span class="layui-font-12 layui-font-gray">Button</span>
              <span class="layui-badge-dot layui-bg-green"></span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../icon/index.html">
              <span>图标</span>
              <span class="layui-font-12 layui-font-gray">Icon</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../anim/index.html">
              <span>动画</span>
              <span class="layui-font-12 layui-font-gray">Anim</span>
            </a>
          </div>
        </li>
      </ul>
    </li>
    <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
      <div class="layui-menu-body-title">表单</div>
      <ul>
        <li>
          <div class="layui-menu-body-title">
            <a href="../form/index.html">
              <span>表单组件</span>
              <span class="layui-font-12 layui-font-gray">Form</span>
              <span class="layui-badge-dot layui-bg-green"></span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../form/input.html">
              <span>输入框</span>
              <span class="layui-font-12 layui-font-gray">Input / Textarea</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../form/select.html">
              <span>选择框</span>
              <span class="layui-font-12 layui-font-gray">Select</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../form/checkbox.html">
              <span>复选框</span>
              <span class="layui-font-12 layui-font-gray">Checkbox</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../form/radio.html">
              <span>单选框</span>
              <span class="layui-font-12 layui-font-gray">Radio</span>
            </a>
          </div>
        </li>
      </ul>
    </li>
    <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
      <div class="layui-menu-body-title">展示</div>
      <ul>
        <li>
          <div class="layui-menu-body-title">
            <a href="../table/index.html">
              <span>表格</span>
              <span class="layui-font-12 layui-font-gray">Table</span>
              <span class="layui-badge-dot layui-bg-green"></span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../laypage/index.html">
              <span>分页</span>
              <span class="layui-font-12 layui-font-gray">Laypage</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../treeTable/index.html">
              <span>树形表格</span>
              <span class="layui-font-12 layui-font-gray">TreeTable</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../nav/index.html">
              <span>导航菜单</span>
              <span class="layui-font-12 layui-font-gray">Nav</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../menu/index.html">
              <span>基础菜单</span>
              <span class="layui-font-12 layui-font-gray">Menu</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../tab/index.html">
              <span>选项卡</span>
              <span class="layui-font-12 layui-font-gray">Tab</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../badge/index.html">
              <span>徽章</span>
              <span class="layui-font-12 layui-font-gray">Badge</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../auxiliar/index.html">
              <span>辅助</span>
              <span class="layui-font-12 layui-font-gray">Blockquote / Fieldset / hr</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../class/index.html">
              <span>公共类</span>
              <span class="layui-font-12 layui-font-gray">Class</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../panel/index.html">
              <span>面板</span>
              <span class="layui-font-12 layui-font-gray">Panel / Card / Collapse</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../progress/index.html">
              <span>进度条</span>
              <span class="layui-font-12 layui-font-gray">Progress</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../timeline/index.html">
              <span>时间线</span>
              <span class="layui-font-12 layui-font-gray">Timeline</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../fixbar/index.html">
              <span>固定条</span>
              <span class="layui-font-12 layui-font-gray">Fixbar</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../tree/index.html">
              <span>树组件</span>
              <span class="layui-font-12 layui-font-gray">Tree</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../carousel/index.html">
              <span>轮播</span>
              <span class="layui-font-12 layui-font-gray">Carousel</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../flow/index.html">
              <span>流加载</span>
              <span class="layui-font-12 layui-font-gray">Flow</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../code/index.html">
              <span>代码预览组件</span>
              <span class="layui-font-12 layui-font-gray">Code</span>
            </a>
          </div>
        </li>
      </ul>
    </li>
    <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
      <div class="layui-menu-body-title">交互</div>
      <ul>
        <li>
          <div class="layui-menu-body-title">
            <a href="../layer/index.html">
              <span>弹出层</span>
              <span class="layui-font-12 layui-font-gray">Layer</span>
              <span class="layui-badge-dot layui-bg-green"></span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../laydate/index.html">
              <span>日期与时间选择</span>
              <span class="layui-font-12 layui-font-gray">Laydate</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../upload/index.html">
              <span>上传</span>
              <span class="layui-font-12 layui-font-gray">Upload</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../dropdown/index.html">
              <span>下拉菜单</span>
              <span class="layui-font-12 layui-font-gray">Dropdown</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../colorpicker/index.html">
              <span>颜色选择器</span>
              <span class="layui-font-12 layui-font-gray">Colorpicker</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../transfer/index.html">
              <span>穿梭框</span>
              <span class="layui-font-12 layui-font-gray">Transfer</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../slider/index.html">
              <span>滑块</span>
              <span class="layui-font-12 layui-font-gray">Slider</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../rate/index.html">
              <span>评分</span>
              <span class="layui-font-12 layui-font-gray">Rate</span>
            </a>
          </div>
        </li>
      </ul>
    </li>
    <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
      <div class="layui-menu-body-title">其他</div>
      <ul>
        <li>
          <div class="layui-menu-body-title">
            <a href="../laytpl/index.html">
              <span>模板引擎</span>
              <span class="layui-font-12 layui-font-gray">Laytpl</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="index.html">
              <span>工具模块</span>
              <span class="layui-font-12 layui-font-gray">Util</span>
            </a>
          </div>
        </li>
      </ul>
    </li>
    
  </ul>
</div>

  <div class="ws-content">
    <div class="layui-text ws-text" id="WS-text">
      <h1>工具模块</h1>
<blockquote class="layui-elem-quote">
<p>工具模块 <code>util</code> 是由工具类方法和小组件组成的集合。</p>
</blockquote class="layui-elem-quote">
<h2 id="examples" lay-toc="{hot: true}" style="margin-bottom: 0;">示例</h2>
<div>
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
  <textarea>
<h3 class="ws-anchor ws-bold">倒计时</h3>
请选择要计算的日期：
<div class="layui-inline">
  <input type="text" readonly class="layui-input" id="test1" value="2099-12-31 00:00:00">
</div>
<blockquote class="layui-elem-quote" style="margin-top: 10px;">
  <div id="test2"></div>
</blockquote>
 
<h3 class="ws-anchor ws-bold">某个时间在多久前</h3>
请选择要计算的日期：
<div class="layui-inline">
  <input type="text" readonly class="layui-input" id="test3">
</div>
<span class="layui-word-aux" id="test4"></span>
  
<h3 class="ws-anchor ws-bold">转换日期格式</h3>
请编辑格式：
<div class="layui-inline">
  <input type="text" value="yyyy-MM-dd HH:mm:ss" class="layui-input" id="test5">
</div>
<span class="layui-word-aux" id="test6"></span>
  
<h3 class="ws-anchor ws-bold">转义 HTML</h3>
<div class="layui-form">
  &lt;textarea class="layui-textarea" id="test7"&gt;
<h3>HTML Title</h3>
&lt;script&gt;
  alert(0);
&lt;/script&gt;
  &lt;/textarea&gt;
</div>
<div class="layui-btn-container" style="margin-top: 10px;">
  <button class="layui-btn" lay-on="escape">转义</button>
  <button class="layui-btn" lay-on="unescape">还原</button>
</div>
<!-- import layui --> 
<script>
layui.use(function(){
  var util = layui.util;
  var laydate = layui.laydate;
  var layer = layui.layer;
  var $ = layui.$;
  // 倒计时
  var thisTimer;
  var setCountdown = function(value){
    var endTime = new Date(value); // 结束日期
    var serverTime = new Date(); // 假设为当前服务器时间，这里采用的是本地时间，实际使用一般是取服务端的
     
    clearTimeout(thisTimer);
    util.countdown(endTime, serverTime, function(date, serverTime, timer){
      var str = date[0] + ' 天 ' + date[1] + ' 时 ' +  date[2] + ' 分 ' + date[3] + ' 秒';
      lay('#test2').html('距离上述日期还有：'+ str);
      thisTimer = timer;
    });
  };
  setCountdown('2099-12-31 00:00:00');
  
  laydate.render({
    elem: '#test1',
    type: 'datetime',
    done: function(value, date){
      setCountdown(value);
    }
  });
  
  
  // 某个时间在多久前
  var setTimeAgo = function(y, M, d, H, m, s){
    var str = util.timeAgo(new Date(y, M||0, d||1, H||0, m||0, s||0));
    lay('#test4').html(str);
  };
  laydate.render({
    elem: '#test3',
    type: 'datetime',
    done: function(value, date){
      setTimeAgo(
        date.year, 
        date.month - 1, 
        date.date, 
        date.hours, 
        date.minutes, 
        date.seconds
      );
    }
  });
  
  // 转换日期格式
  var toDateString = function(format){
    var dateString = util.toDateString(new Date(), format); // 执行转换日期格式的方法
    $('#test6').html(dateString);
  };
  toDateString($('#test5').val());
  // 输入框事件
  $('#test5').on('input propertychange', function(){
    toDateString(this.value);
  });
  
  // HTML 转义
  util.event('lay-on', {
    escape: function(){ // 转义
      var textarea = $('#test7');
      var value = textarea.val();
      var str = util.escape(value); // 执行转义方法
      textarea.val(str);
    },
    unescape: function(){
      var textarea = $('#test7');
      var value = textarea.val();
      var str = util.unescape(value); // 执行转义方法
      textarea.val(str);
    }
  });
  
});
</script>
  </textarea>
</pre>
</div>
<p></p>
<h2 id="api" lay-toc="{hot: true}">API</h2>
<table class="layui-table">
<thead>
<tr>
<th>API</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>var util = layui.util</td>
<td>获得 <code>util</code> 模块。</td>
</tr>
<tr>
<td>util.fixbar(options)</td>
<td><code>fixbar</code> 固定条组件，用法：<a href="../fixbar/index.html">#详见</a></td>
</tr>
<tr>
<td><a href="index.html#countdown">util.countdown(endTime, serverTime, callback)</a></td>
<td>倒计时</td>
</tr>
<tr>
<td><a href="index.html#timeAgo">util.timeAgo(time, onlyDate)</a></td>
<td>某个时间在多久前</td>
</tr>
<tr>
<td><a href="index.html#toDateString">util.toDateString(time, format)</a></td>
<td>将毫秒数或日期对象转换成日期格式字符</td>
</tr>
<tr>
<td><a href="index.html#digit">util.digit(num, length)</a></td>
<td>数字前置补零</td>
</tr>
<tr>
<td><a href="index.html#escape">util.escape(str)</a></td>
<td>转义 HTML 字符</td>
</tr>
<tr>
<td><a href="index.html#escape">util.unescape(str)</a></td>
<td>还原 HTML 字符</td>
</tr>
<tr>
<td><a href="index.html#openWin">util.openWin(options)</a> <sup>2.8+</sup></td>
<td>打开浏览器新标签页</td>
</tr>
<tr>
<td><a href="index.html#on">util.on(attr, obj, eventType)</a></td>
<td>批量事件处理</td>
</tr>
</tbody>
</table class="layui-table">
<h3 id="countdown" class="ws-anchor ws-bold">倒计时</h3>
<p><code>util.countdown(endTime, serverTime, callback);</code></p>
<ul>
<li>参数 <code>endTime</code> : 结束时间毫秒数或 <code>Date</code> 对象</li>
<li>参数 <code>serverTime</code> : 服务器当前时间毫秒数 或 <code>Date</code> 对象</li>
<li>参数 <code>callback</code> : 倒计时回调函数。若倒计时正在运行，则每一秒都会执行一次。并且返回以下三个参数。
<ul>
<li><code>date</code> 包含天/时/分/秒的对象</li>
<li><code>serverTime</code> 当前服务器时间毫秒数或 <code>Date</code> 对象</li>
<li><code>timer</code> 计时器返回的索引，用于 <code>clearTimeout</code></li>
</ul>
</li>
</ul>
<p>该方法并不负责视图的呈现，而仅返回倒计时数值。 相关用法见：<a href="index.html#examples">#示例</a></p>
<pre><code class="layui-code">layui.use('util', function(){
  var util = layui.util;
  // 示例
  var endTime = new Date(2099,1,1).getTime() // 假设为结束日期
  var serverTime = new Date().getTime(); // 这里采用的是本地时间，实际使用一般是取服务端时间
  util.countdown(endTime, serverTime, function(date, serverTime, timer){
    console.log(date, serverTime, timer)
  });
});
</code></pre>
<h3 id="timeAgo" class="ws-anchor ws-bold">某个时间在多久前</h3>
<p><code>var result = util.timeAgo(time, onlyDate);</code></p>
<ul>
<li>参数 <code>time</code> : 某个时间的毫秒数或日期对象</li>
<li>参数 <code>onlyDate</code> : 是否在超过 30 天后，只返回日期字符，而不返回时分秒</li>
</ul>
<p>返回结果</p>
<ul>
<li>若 <code>time</code> 在 3 分钟以内，返回： 刚刚</li>
<li>若 <code>time</code> 在 30 天以内，返回： 若干分钟前、若干小时前、若干天前，如：5 分钟前</li>
<li>若 <code>time</code> 在 30 天以上，返回： 日期字符，如： 2023-01-01</li>
</ul>
<pre><code class="layui-code">var result = util.timeAgo(1672531200000); // 2023-01-01 00:00:00
</code></pre>
<p>相关效果见：<a href="index.html#examples">#示例</a></p>
<h3 id="toDateString" class="ws-anchor ws-bold">转换日期格式字符</h3>
<p><code>var result = util.toDateString(time, format);</code></p>
<ul>
<li>参数 <code>time</code> : 毫秒数或日期对象</li>
<li>参数 <code>format</code> : 日期字符格式。默认格式：<code>yyyy-MM-dd HH:mm:ss</code> 。可自定义，如： <code>yyyy年MM月dd日</code></li>
</ul>
<pre><code class="layui-code">var result = util.toDateString(1672531200000, 'yyyy-MM-dd'); // 2023-01-01
</code></pre>
<h3 id="digit" class="ws-anchor ws-bold">数字前置补零</h3>
<p><code>util.digit(num, length);</code></p>
<ul>
<li>参数 <code>num</code> : 原始数字</li>
<li>参数 <code>length</code> : 数字长度，如果原始数字长度小于 length，则前面补零</li>
</ul>
<p>该方法返回一个 <code>string</code> 类型的结果，如：</p>
<pre><code class="layui-code">var rs1 = util.digit(6, 2); // &quot;06&quot;
var rs2 = util.digit(7, 3); // &quot;007&quot;
</code></pre>
<h3 id="escape" class="ws-anchor ws-bold">转义和还原 HTML</h3>
<ul>
<li><code>util.escape(str);</code> 转义 HTML</li>
<li><code>util.unescape(str);</code> 还原被转义的 HTML</li>
</ul>
<p>参数 <code>str</code> : 任意 HTML 字符</p>
<pre><code class="layui-code">var str1 = util.escape('&lt;div&gt;123&lt;/div&gt;'); // 返回： &amp;lt;div&amp;gt;123&amp;lt;/div&amp;gt;
var str2 = util.unescape('&amp;lt;div&amp;gt;123&amp;lt;/div&amp;gt;'); // 返回： &lt;div&gt;123&lt;/div&gt;
</code></pre>
<h3 id="openWin" class="ws-anchor ws-bold">打开浏览器新标签页 <sup>2.8+</sup></h3>
<p><code>util.openWin(options);</code></p>
<ul>
<li>参数 <code>options</code> : 属性配置项。可选项详见下表</li>
</ul>
<table class="layui-table">
<thead>
<tr>
<th>属性</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>url</td>
<td>要打开页面 <code>URL</code></td>
</tr>
<tr>
<td>target</td>
<td>打开页面的方式或窗口 <code>name</code></td>
</tr>
<tr>
<td>content</td>
<td>打开的页面内容。若设置了 <code>url</code> 属性，则该属性无效</td>
</tr>
<tr>
<td>specs</td>
<td>窗口的相关配置，同 <code>window.open()</code> 的 <code>specs</code></td>
</tr>
<tr>
<td>window</td>
<td>当前所在的窗口对象，默认 <code>self</code></td>
</tr>
</tbody>
</table class="layui-table">
<p>该方法基于原生 <code>window.open()</code> 的二次封装，以提升打开浏览器窗口的灵活性。</p>
<pre><code class="layui-code">// 打开一个 url
util.openWin({
  url: 'https://cn.bing.com'
});
// 打开一个自定义内容窗口
util.openWin({
  content: 'Hello World.'
});
</code></pre>
<h3 id="on" class="ws-anchor ws-bold">批量事件处理</h3>
<p><code>util.on(attr, obj, eventType);</code></p>
<ul>
<li>参数 <code>attr</code> : 触发事件的元素属性名</li>
<li>参数 <code>obj</code> : 事件回调函数集合</li>
<li>参数 <code>eventType</code> : 事件类型。默认 <code>click</code></li>
</ul>
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['code', 'preview'], tools: ['full']}">
  <textarea>
<div class="layui-btn-container">
  <button class="layui-btn" lay-on="e1">事件 1</button>
  <button class="layui-btn" lay-on="e2">事件 2</button>
  <button class="layui-btn" lay-on="e3">事件 3</button>
</div>
<!-- import layui -->
<script>
layui.use('util', function(){
  var util = layui.util;
  
  // 处理属性 为 lay-on 的所有元素事件
  util.on('lay-on', {
    e1: function(){
      console.log(this); // 当前触发事件的 DOM 对象
      layer.msg('触发了事件 1');
    },
    e2: function(){
      layer.msg('触发了事件 2');
    },
    e3: function(){
      layer.msg('触发了事件 3');
    }
  });
});
</script>
  </textarea>
</pre>

    </div>
    <div class="ws-text-tools">
      
      <a href="https://github.com/layui/layui/edit/2.x/docs/util/index.md" rel="nofollow" target="_blank" title="在 Github 上编辑此文档">
        <i class="layui-icon layui-icon-edit"></i>
      </a>
      
    </div>
  </div>
</div>
<div class="ws-menu-bar layui-bg-green layui-hide">
  <i class="layui-icon layui-icon-spread-left"></i>
</div>
  
<div class="layui-footer ws-footer">
  <p>
    Copyright &copy; 2023 <a href="../../../index.html">Layui</a> MIT Licensed</p>
  <p id="LAY-footer-info">
    <a href="https://gitee.com/layui/layui/blob/main/DISCLAIMER.md" rel="nofollow" target="_blank">免责声明</a> 
    <a href="https://github.com/layui/layui/blob/main/LICENSE" rel="nofollow" target="_blank">开源协议</a>
    <a href="https://gitee.com/layui/" target="_blank">开源生态</a>
    <a href="https://codepen.io/layui/pen/bGxZXrd" rel="nofollow" target="_blank">在线测试</a>
    <a href="https://gitee.com/layui/layui/issues" rel="nofollow" target="_blank">社区交流</a>
  </p>
  <p>
    <span>
      鸣谢：
      <a href="https://www.upyun.com/?invite=SJ0wu6g2-&referer=layui" target="_blank" sponsor="upyun" style="color: #23A7E8;">
        <strong>又拍云</strong>
      </a>
      <a href="https://gitee.com/?referer=layui" target="_blank" sponsor="Gitee" style="color:#C71D23;">
        <strong>Gitee</strong>
      </a>
      <a href="https://www.iconfont.cn/?referer=layui" target="_blank" sponsor="Gitee" style="color: #9B16FF;">
        <strong>iconfont</strong>
      </a>
    </span>
  </p>
</div>
<div class="ws-shade"></div>
 
<script src="/public/layui/v/2.8.6/layui.js"></script>
<script>
layui.config({
  base: '//res.sentcss.com/static/dist/docs/2.8/modules/',
  version: '16',
  res: '//res.sentcss.com/static/dist/docs/',
  curl: ''
}).use('global',function(w){w.a||w.r&&w.r()});
</script>
 
<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?363b2abe8678eec8a6850500ea63a63b";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>

</body>
</html>